<template>
  <div
    class="bj-upload-img"
    :class="viewMode && value.length == 0 && 'empty'"
    id="bj-upload-img"
  >
    <div class="file-list" v-for="(item, index) in value" :key="index">
      <img
        :src="item[replaceField]"
        @click="previewImg(item)"
        title="点击预览"
      />
      <!-- 删除按钮 -->
      <div
        class="delete-button"
        @click="deleteImg(item, index)"
        v-if="!item.loading && !viewMode"
      >
        <a-icon
          type="close"
          :style="{
            fontSize: '12px',
            color: '#ffffff',
          }"
        />
      </div>
      <!-- 上传loading -->
      <div class="up-loading" v-if="item.loading && !viewMode">
        <a-icon type="loading" :style="{ fontSize: '30px', color: '#333' }" />
      </div>
      <!-- 上传失败图标 -->
      <div
        class="up-loading up-error"
        v-if="item.fail && !item.loading && !viewMode"
      >
        <a-icon
          type="info-circle"
          :style="{ fontSize: '30px', color: '#ff6565' }"
        />
        <div>上传失败</div>
      </div>
    </div>
    <a-upload
      accept="image/*"
      class="bj-upload-button"
      list-type="picture-card"
      v-if="(value.length < count || count == 0) && !viewMode"
      :file-list="fileList"
      :beforeUpload="
        (file) => {
          return beforeUpload(file);
        }
      "
    >
      <a-icon
        type="plus"
        :style="{
          fontSize: '32px',
          color: '#D5D5D5',
        }"
      />
    </a-upload>
    <!-- 预览弹窗 -->
    <a-modal
      v-model="visible"
      maskClosable
      :closable="false"
      :getContainer="getContainer"
      :footer="null"
      wrapClassName="preview-modal"
    >
      <img :src="previewSrc" @click="visible = false" />
    </a-modal>
    <!-- 暂无图片 -->
    <a-empty description="暂无图片" v-if="viewMode && value.length == 0" />
  </div>
</template>
<script>
export default {
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      },
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
    //最大上传数量
    count: {
      type: Number,
      default: 0,
    },
    //
    replaceField: {
      type: String,
      default: "src",
    },
  },
  data() {
    return {
      fileList: [],
      images: [],
      visible: false,
      previewSrc: "",
    };
  },
  mounted() {},
  methods: {
    //预览
    previewImg(data) {
      let { replaceField } = this;
      this.previewSrc = data[replaceField];
      this.visible = true;
    },

    //上传
    beforeUpload(file) {
      let { count, value, replaceField } = this;
      let filereader = new FileReader();
      filereader.onload = (e) => {
        let src = e.target.result;
        if (value.length < count || count == 0) {
          this.$emit("input", [
            ...value,
            { [replaceField]: src, $$DataType: 1, file },
          ]);
          setTimeout((_) => {
            this.$emit("change", { file, index: this.value.length - 1 });
          });
        }
      };
      filereader.readAsDataURL(file);
      return false;
    },

    //删除
    deleteImg(file, index) {
      let { value } = this;
      let data = value.filter((v, i) => i != index);
      this.$emit("input", data);
      this.$emit("remove", { file, index });
    },

    getContainer() {
      return document.getElementById("bj-upload-img");
    },
  },
};
</script>
<style lang="less" scoped>
.bj-upload-img {
  .flex();
  flex-wrap: wrap;
  &.empty {
    justify-content: center;
  }
  /deep/.preview-modal {
    .ant-modal {
      width: 100% !important;
      height: 100% !important;
      top: 0;
      left: 0;
      padding: 0;
      .ant-modal-content {
        padding: 0;
        height: 100% !important;
        border-radius: 0;
        box-shadow: none;
        background: none;
        width: 100%;
        height: 100%;
        .ant-modal-body {
          padding: 0;
          width: 100%;
          height: 100%;
          .flex();
          justify-content: center;
          align-items: center;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }
  }
  .file-list {
    width: 168px;
    height: 162px;
    background: #f5f7fa;
    margin: 0 20px 20px 0;
    position: relative;
    .up-loading {
      position: absolute;
      width: 100%;
      height: 100%;
      .flex();
      align-items: center;
      justify-content: center;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.5);
      &.up-error {
        background: rgba(0, 0, 0, 0.3);
        flex-direction: column;
        color: #ff6565;
        font-weight: bold;
      }
    }
    img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
    .delete-button {
      position: absolute;
      width: 20px;
      height: 20px;
      background: #ff6565;
      top: -10px;
      right: -10px;
      border-radius: 50%;
      cursor: pointer;
      .flex();
      align-items: center;
      justify-content: center;
      z-index: 99;
    }
  }
  /deep/.bj-upload-button {
    width: 168px;
    height: 162px;
    .ant-upload-select-picture-card {
      width: 100%;
      height: 100%;
      background-color: #f6f9ff;
    }
  }
}
</style>
